<template>
  <div class="ele-body ele-body-layout">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>微信客服展示</span>
      </div>
      <el-row :gutter="10">
        <el-col :lg="6">
          <ele-pro-table
            ref="table"
            :columns="columns"
            :current.sync="current"
            :datasource="url"
            :need-page="false"
            :parse-data="parseData"
            :selection.sync="selection"
            :toolkit="[]"
            :where="where"
            class="service-table"
            height="calc(100vh - 364px)"
            highlight-current-row
            tool-class="ele-toolbar-actions"
            @done="done">

            <!-- 表头工具栏 -->
            <template slot="toolbar">
              <el-form
                :model="where"
                class="ele-form-search"
                size="small"
                @keyup.enter.native="reload"
                @submit.native.prevent>
                <el-row :gutter="10" style="height: 34px!important;">
                  <el-form-item style="margin-bottom: 5px; margin-top: 5px;">
                    <el-select
                      v-model="where.bazaar"
                      clearable
                      placeholder="推广市场" style="width: 42%; margin-right: 10px;" @change="reload">
                      <el-option
                        v-for="item in bazaarList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="where.name"
                      clearable
                      placeholder="推广落地页或名称"
                      size="small"
                      style=" margin-right: 10px;  width: 30%;"
                      @clear="reload"/>
                    <el-button
                      icon="el-icon-search"
                      size="small"
                      style="width: 22%"
                      @click="reload">搜索
                    </el-button>
                  </el-form-item>
                </el-row>
              </el-form>
            </template>

            <!-- 推广落地页 -->
            <template slot="name" slot-scope="{row}">
              <div>
                <el-link :href="'http://' + row.url" style="font-weight:bold;" target="_blank">
                 【{{row.name}}】 {{row.url }}
                </el-link>
              </div>
              <div class="popover-url">
                <span>落地页: {{ row.url }}</span>
              </div>
              <div class="popper-count">({{ row.count }})</div>
            </template>
          </ele-pro-table>

          <div class="ele-table-tool-title ele-cell">
            <div class="ele-cell-content" style="margin-left: 0;">
              <form class="el-form ele-form-search">
                <div class="el-row ele-form-tool-bottom">
                  <div class="el-form-item el-form-item--small ele-form-tool-small">
                    <el-button
                      icon="el-icon-plus"
                      plain
                      size="small"
                      style="width: 48%;"
                      type="primary"
                      @click="openEdit">添加客服展示
                    </el-button>
                    <el-button
                      icon="el-icon-delete"
                      plain
                      size="small"
                      style="width: 48%;"
                      type="danger"
                      @click="remove">删除客服展示
                    </el-button>
                  </div>
                </div>
              </form>
            </div>
          </div>

        </el-col>
        <el-col :lg="18" style="margin-bottom: 15px;">
          <service-plan-list v-if="current" :bazaar="bazaarList" :service="service" :service-id="current.id"
                             :zone="zoneList" @updateMethod="updateMethod"/>
        </el-col>
      </el-row>
    </el-card>

    <!-- 编辑弹窗 -->
    <service-plan-edit
      :bazaar="bazaarList"
      :page="pageList"
      :service="service"
      :visible.sync="showEdit"
      :zone="zoneList"
      @done="reload"/>

  </div>
</template>

<script>
import ServicePlanList from "./service-plan-list";
import ServicePlanEdit from './service-plan-edit';

export default {
  name: 'ServicePlanIndex',
  components: {ServicePlanList, ServicePlanEdit},
  data() {
    return {
      // 表格数据接口
      url: '/servicePlan/getDomainUrl',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          prop: 'name',
          slot: 'name',
          label: '展示落地页',
          sortable: 'custom',
          showOverflowTooltip: false
        }
      ],
      // 市场列表
      bazaarList: [],
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 分组列表
      zoneList: [],
      // 站点列表
      pageList: [],
      // 客服列表
      service: [],
      // 左边搜索条件
      where: {
        serviceId: null,
        name: null
      },
    };
  },
  methods: {

    updateMethod(obj) {
      this.current.count = obj.count;
    },

    parseData(res) {
      if (res.code === 0) {
        this.bazaarList = res.bazaar;
        this.service = res.service;
        this.pageList = res.page;
        this.zoneList = res.zone;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg
      };
    },

    done(res) {
      if (res.data.length > 0) {
        this.$refs.table.setCurrentRow(res.data[0]);
      }
    },

    reload() {
      this.$refs.table.reload({where: this.where});
    },

    openEdit() {
      if (!this.$hasPermission("serviceplan:save")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.showEdit = true;
    },

    remove() {
      if (!this.$hasPermission("serviceplan:delete")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return;
      }
      this.$confirm('确定要删除选中展示落地页吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const iad = this.selection.map(d => d.id);
        const loading = this.$loading({lock: true});
        this.$http.delete('/servicePlan/deleteDomainUrl', {
          data: {id: iad.join(',')}
        }).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    }

  }
}
</script>

<style scoped>
.service-table ::v-deep .el-table__row {
  cursor: pointer;
}

.service-table ::v-deep .el-table__row > td:last-child:after {
  content: "\e6e0";
  font-family: element-icons !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.service-table ::v-deep .el-table__row > td:last-child .cell {
  padding-right: 20px;
}

.ele-body-layout ::v-deep .ele-form-tool-bottom {
  border-bottom: 1px solid var(--border-color-lighter);
  border-left: 1px solid var(--border-color-lighter);
  border-right: 1px solid var(--border-color-lighter);
}

.ele-body-layout ::v-deep .ele-form-tool-small {
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 2% !important;
}

.ele-body-layout ::v-deep .popover-url {
  width: 83% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ele-body-layout ::v-deep .popper-count {
  position: absolute;
  right: 28px;
  color: red;
  top: 20px;
}
</style>
